<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8"/>
    <title>简易计算题生成程序</title>
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <script src="../js/jquery.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>

</head>
<body style="background-color : silver">
<div class="alert alert-warning alert-dismissible" role="alert" th:if="${msg!=null}">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
    <strong>错误：</strong>
    <span th:text="${msg}"></span>
</div>
<div class="text-center" style="margin-top: 100px">
    <div align="center"   style="color: rebeccapurple;font-size: 22px">
        <h3>学号：2016207314 &nbsp;&nbsp;&nbsp;姓名：李祥 &nbsp;&nbsp;&nbsp;班级：16软外（java）4
        </h3>
    </div>
    <br/>
    <br/>
    <br/>
    <br/>
    <form class="form-inline" action="/proceed" method="post">
        <div class="form-group">
            <label for="number"><h3>请输入要生成的计算题数目</h3></label>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="number" class="form-control" id="number" name="number" placeholder="计算题数目"/>
        </div>
        <br/>
        <br/>
        <br/>

        <div class="form-group">
            <label for="operator"><h3>请选择操作符类型</h3></label>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <select class="form-control" name="operator" id="operator">
                <option value="1">加法</option>
                <option value="0">减法</option>
                <option value="3">加减法混合</option>
            </select>
        </div>
        <br/>
        <br/>
        <br/>
        <div class="form-group">
            <label for="showanswer"><h3>请选择是否显示答案</h3></label>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <select class="form-control" name="showanswer" id="showanswer">
                <option value="false">后附答案</option>
                <option value="true">直接显示答案</option>
            </select>
        </div>
        <button id="submit" type="submit" class="btn btn-success btn-lg" style="margin-left: 25px;margin-top: 14px;">
            提交
        </button>
        <p id="tip" style="color: red">格式错误，请检查后再提交</p>
        <script>
            $('#tip').hide();
            $("#number").blur(function () {
                if ($("#number").val() <= 0) {
                    $('#tip').show();
                    $('#submit').attr("disabled", true);
                } else {
                    $('#tip').hide();
                    $('#submit').attr("disabled", false);
                }
            });

        </script>
    </form>
</div>
</body>
</html>